<template>
	<view class="bd-t container">
		<view class="cell-list">
			<view class="cell-item">
				<view class="label">物流单号</view>
				<view class="df1 value">
					<input
						v-model="logisticsNumber"
						type="text"
						placeholder-class="input"
						placeholder="请填写物流单号"
						class="df1 input"
					/>
				</view>
			</view>
		</view>
		<!-- 底部 begin -->
		<view class="pof footer">
			<view
				v-if="!applied"
				class="df df-c submit-btn"
				:style="themeStyles.btnFullColor"
				@click="showConfirmPop()"
				>提交</view
			>
		</view>
		<!-- 底部 end -->
		<!-- 弹出层 begin -->
		<!-- <view class="df pop confirm-pop">

        </view> -->
		<!-- 弹出层 end -->
	</view>
</template>

<script>
import { fillLogisticsNum } from "@/lib/api/refundsServer/info";
import { queryLogistics } from "@/lib/api/logisticsServer/info";
export default {
	data() {
		return {
			refundsId: "",
			logisticsNumber: "",
			logisticsName: ""
		};
	},

	onLoad(option) {
		console.log("option", option);
		this.refundsId = option.refundsId;
	},

	methods: {
		async showConfirmPop() {
			try {
				const logisticsName = await this.onQueryLogisticsName();
				const modalData = {
					title: `物流公司：${logisticsName}`,
					content: `单号：${this.logisticsNumber}`,
					showCancel: true,
					cancelText: "重新填写"
				};
				await this.$api.showModal(modalData);
				this.sendLogisticsNumber();
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "操作失败");
			}
		},

		async sendLogisticsNumber() {
			const propsData = {
				refundsId: this.refundsId,
				logisticsNo: this.logisticsNumber
			};
			try {
				await fillLogisticsNum(propsData);
				await this.$api.showToast("成功提交");
				uni.reLaunch({
					url: "/pages/user/pages/afterSale/afterSaleList"
				});
			} catch (error) {
				this.$api.showToast(error.resultInfo || "提交失败");
			}
		},

		onQueryLogisticsName() {
			const propsData = {
				logisticsNo: this.logisticsNumber
			};
			return queryLogistics(propsData).then(res => {
				return res.data.logisticsName;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-top: 16rpx;
	background: $theme-main-bg-color;
}

.cell-list {
	background: $theme-panel-bg-color;
	margin: 0 24rpx;
	.cell-item {
		display: flex;
		align-items: center;
		height: 104rpx;
		margin-top: 24rpx;
		border-radius: 16rpx;
		overflow: hidden;
		padding: 0 24rpx;
		font-size: $theme-size-base;
		.label {
			color: $theme-color-main-base;
		}
		.value {
			margin-left: 16rpx;
			color: $theme-color-base;
		}
	}
}

.footer {
	bottom: 0;
	left: 0;
	right: 0;
	height: 80rpx;
	z-index: 997;
	display: flex;
	justify-content: center;
	align-items: center;
	.submit-btn {
		position: fixed;
		bottom: 30rpx;
		font-size: $theme-size-large-base;
		width: 702rpx;
		height: 80rpx;
		border-radius: 200rpx;
	}
}

.confirm-pop {
}
</style>